<template>
  <!-- top -->
  <div class="top">
    <div class="nav_menu">
      <i>/{{ jsonData }}</i>
      <i>{{ jsonData }}</i>
      <i class="cursor el-icon-s-data"></i>
      <i class="cursor el-icon-position"></i>
      <i class="cursor el-icon-minus"></i>
      <i class="cursor el-icon-close"></i>
    </div>
  </div>
</template>

<script>
import ceke_data from "@/json/cake_data.json";
export default {
  name: "top",
  computed: {
    jsonData() {
      return ceke_data.length;
    },
  },
};
</script>

<style>
.top {
  height: 5%;
  background-color: hsl(195deg 100% 40%);
  display: flex;
  justify-content: right;
  align-items: center;
  padding-right: 15px;
}
.nav_menu {
  width: 200px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  color: white;
}
.cursor {
  cursor: pointer;
}
</style>